<template>
  <div class="shopLists">
      <navs :navtitle="title"></navs>
      <navi></navi>
      <div>
          <div class="lists" >
                  <router-link to='' tag="div">
                       <div class="list" v-for="(item,index) in data" :key="index" >
                                <div class="list-left">
                                   <img :src="item.mainPic||item.picsUrl|picsUrl" alt="">
                                   <img :src="item.mainPic" alt="">
                                </div>
                                <div class="list-right">
                                    
                                    <p class="font">{{item.goodsName}}</p>
                                    <p class="spice">
                                        <span class="spice-a">￥</span>
                                        <span class="spice-b">{{item.orderPrice}}</span>
                                        <!-- <span class="spice-c">.00</span> -->
                                        <span class="spice-d">{{item.integerZeroConvert}}</span>
                                    </p>
                                        <p class="site">
                                        <span>已购买{{item.purchaseTimes}}次</span>
                                        <span class="site-b">{{item.dealer.name}} </span>
                                        </p>
                                        <p class="shop" >
                                            <img src="../../assets/Page 1.png" alt="" >
                                        </p>
                                </div>
                        </div>
                  </router-link>
                 
              </div>
      </div>
  </div>
</template>

<script>
import navs from '../../components/Navbar'
import navi from '../../components/Navigation'
export default {
    components:{
        navs,navi
    },
    data(){
        return{
          data:[],
          result:'',
          title:'成都双流宏福商贸有限公司'

        }
    },
    methods:{
       getData(){
                    let headers;
                    if (this.$store.state.token) {
                        headers = {
                        token: this.$store.state.token,
                        userId: this.$store.state.userInfo.id
                        };
                     } else {
                        headers = {};
                     }
                     let groupStoreId=this.$store.state.userInfo.id
                     let merchantId=this.$store.state.merchantInfo.merchantId
                     let shopId=this.$store.state.storeId.storeId
                     let stationId=this.$store.state.stationId
                     let  userId=this.$store.state.merchantInfo.userId
                     this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/getUsualGoodsByDealerId',{
                              dealerId: this.$store.state.dealerId,
                            //   dealerId: 14195,
                              groupStoreId: groupStoreId,
                              merchantId: merchantId, 
                              shopId: shopId, 
                              stationId: stationId, 
                              userId: userId,
                            // dealerId:"14195",groupStoreId:16545,merchantId:14948,shopId:16546,stationId:51,userId:2189687
                     },
                     {
                        headers,
                     }
                     )
                     .then(res=>{
                         console.log(res)
                            if(res.data.status.statusCode===0){
                                this.data=res.data.result
                                this.result=res.data.result[0].dealer.name
            
                         }
                      })
                        .catch(err=>{
                            console.log(err)
                        })
                }
    },
    created(){
        this.getData()
    },
    filters:{
        picsUrl(val){
        if(val) {
            return val.split(',')[0]
        }else {
            return val
        }
        },
    }
}

</script>
<style scoped lang="scss">
.header{
    width:100%;
    height:0.45rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
    .router{
         width:0.07rem;
        height:0.15rem;
        position: absolute;
        left: 0.2rem;
        top:0.16rem;
    }
    span{
        font-family: PingFangSC-Regular;
        font-size: 0.18rem;
        color: #030303;
        letter-spacing: -0.36px;
    }
     &::after{
            content: "";
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            background: #ccc;
            height: 1px;
            transform:scale(1,0.5) 
    }
}
.list{
       width:3.4rem;
       height:1rem;
       padding: 0.14rem 0.18rem 0.09rem 0.1rem;
       display: flex;
       align-items: center;
       .list-move{
        width:0.2rem;
        height:0.2rem;
        margin-right:0.1rem;
        img{
            width:100%;
            height:100%;
        }
       }
    .list-left{
            width:1rem;
            height:1rem;
            img{
                width:100%;
                height:100%;
            }
    }
    .list-right{
        display: flex;
        flex:1;
        flex-direction: column;
        padding-left:0.1rem;
        position: relative;
        .font{
            font-family: PingFangSC-Regular;
            font-size: 0.14rem;
            color: #333333;
            letter-spacing: 0;
            line-height: 0.15rem;
            overflow:hidden; 
            text-overflow:ellipsis;
            display:-webkit-box; 
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2; 
        }
        .spice{
            width:100%;
            height:0.2rem;
            margin-top:0.5rem;
         .spice-a{
             font-size:0.12rem;
             color: #DD3333;
             letter-spacing: -0.35px;
             line-height: 0.18rem;
          }
         .spice-b{
                font-family: PingFangSC-Regular;
                font-size: 0.18rem;
                color: #DD3333;
                letter-spacing: -0.35px;
                line-height: 0.18rem;
          }
         .spice-c{
             font-size:0.14rem;
             color: #DD3333;
             letter-spacing: -0.35px;
             line-height: 0.18rem;
          }
         .spice-d{
             font-family: PingFangSC-Regular;
             font-size: 0.1rem;
             color: #999999;
             letter-spacing: -0.29px;
             line-height: 0.1rem;
             margin-left:0.18rem;
         }
        }
        .site{
            margin-top:0.06rem;
            font-family: PingFangSC-Regular;
            font-size: 0.1rem;
            color: #999999;
            letter-spacing: -0.29px;
            line-height: 0.1rem;
          .site-b{
              margin-left:0.18rem;
          }
        }
        .shop{
            position: absolute;
            right:0;
            bottom:0.1rem;
            width:0.16rem;
            height:0.16rem;
          img{
              height:100%;
          }
        }
    }
 }
</style>